<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="app">
  <div v-on:click="fn">v-on点击</div>
  <div @click="fn1">不加括号调用</div>
  <div @click="fn2(1,$event)">加括号传参</div>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#app',
        data() {
            return {
            //  data是存放数据的地方，不推荐存放函数，并且在data中vue并没有对函数的this进行处理
            }
        },
      methods:{
      //    methods用于存放函数，this指向的是vue实例，而不是目标事件对象，因为用户不需要手动操作dom，只需要操作data数据即可
        fn(event){
          console.log(this,event,'fn')
        },
        fn1(event){
          console.log(event,'fn1')
        },
        fn2(a,event){
          console.log(a,event,'fn2')
        }
      }
    })
</script>
</body>
</html>